<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
	<link rel="stylesheet" type="text/css" href="statics/css/main.css">
	<link rel="shortcut icon" href="statics/img/favicon.ico">
	<style type="text/css">
	    footer,section,aside,article,nav,hgroup,figure,figcaption,details,summary{display:block;margin:0;padding:0;border:none
		  }
		time,mark,ruby,rt,rp,output,keygen,meter,progress,command,source{
			text-decoration:none;font-style:normal;font-weight:normal
		}
	</style>
</head>
<body>
	<header class="header">
		<div class="bg"></div>

		<div class="links">
			<a href="">
				了解更多
			</a>
			<span>|</span>
			<a href="">
				反馈意见
			</a>
		</div>
	</header>
	<section class="content" id="mainSection">
		<header class="content-tit">
			<h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
		</header>
		<!--主体内容 -->
		<div class="mainBody-wp">
			<!-- 左边表单区 -->
			<div class="mainBody">
				<!-- Tba -->
				<div class="regTabs">
					<ul>
						<li><a href="#">注册字母邮箱</a></li>
						<li><a href="#">注册手机号邮箱</a></li>
						<li><a href="#">注册VIP邮箱</a></li>
					</ul>
				</div>


				<!--表单内容区，第1个表单区-->
				<div class="regForm" >
					<dl class="regForm-item mainBody-hasFocus-focusArea">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>邮件地址
						</dt>
						<dd class="regForm-item-ct">
							<input  type="text" class="ipt" style="ime-mode:disabled;color:#999;font-weight:normal" autocomplete="off" value="">
							<strong class="txt-14">@</strong>
							<select>
								<option selected="selected" value="163.com">163.com</option>
								<option value="126.com">126.com</option>
								<option value="yeah.net">yeah.net</option>
							</select>
							<div  class="tips">
								<span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
							</div>
						</dd>
					</dl>

					<dl  class="regForm-item">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-item-ct">
							<input  type="password" class="ipt norWidthIpt" style="ime-mode:disabled">
							<div  class="tips" >
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<dl class="regForm-item">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>确认密码
						</dt>
						<dd class="regForm-item-ct">
							<input type="password" class="ipt norWidthIpt" >

							<div class="tips">
								<span class="txt-tips">请再次填写密码</span>
							</div>
						</dd>
					</dl>
					<dl class="regForm-item">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>手机号码
						</dt>
						<dd class="regForm-item-ct">
							<input  id="phone"  type="text" class="ipt norWidthIpt" style="width: 290px;padding-left: 36px;"font-variant-east-asian: value="+86"/>

							<!----国旗下拉框------>
							<div  class="select_panel">
								<a  href="#"  class="flag_CN"><em>&nbsp;</em>中国 +86</a>
								<a  href="#"  class="flag_AL"><em>&nbsp;</em>阿尔巴尼亚(Shqipëria) +355</a>
								<a  href="#"  class="flag_DZ"><em>&nbsp;</em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
								<a  href="#" class="flag_AF"><em>&nbsp;</em>阿富汗(Republic of Afghanistan) +93</em></a>
								<a  href="#"  class="flag_AR"><em>&nbsp;</em>阿根廷(Argentina) +54</a>
								<a  href="#"  class="flag_AE"><em>&nbsp;</em>阿拉伯联合大公国(The United Arab Emirates) +971</a>
								<a href="#"   class="flag_AW"><em>&nbsp;</em>阿鲁巴(Aruba) +297</a>
								<a href="#"  class="flag_OM"><em>&nbsp;</em>阿曼(Sultanate of Oman) +968</a>
								<a href="#"  class="flag_AZ"><em>&nbsp;</em>阿塞拜疆(Azərbaycan) +994</a>
								<a href="#"  class="flag_EG"><em>&nbsp;</em>埃及(The Arab Republic of Egypt) +20</a>
							</div>

							<!----输入框内的国旗和下拉箭头-->
							<div class="it1">
								<div class="itFlag flag_CN">
									<em></em>
								</div>
							</div>
							
							<div class="tips">

								<span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
							</div>
						</dd>
					</dl>

					<dl class="regForm-item">
						<dt class="regForm-item-tit" style="top:30px;">
							<span class="txt-impt">*</span>验证码
						</dt>
						<dd class="regForm-item-ct">
							<input type="text" class="ipt">
							<img src="statics/img/call.jpg" >
							<a href="#" class="switchCode">看不清楚?换一张</a>
							<div class="tips">
								<span class="txt-tips">
									请填写图片中的字符,不区分大小写
								</span>
							</div>
							<div class="btns">
								<a>
									<a href="#" style="text-decoration: none;">
										<strong class="btn" >
											免费获取验证码
										</strong>
									</a>
								</a>
							</div>
						</dd>
					</dl>

					<dl class="regForm-item">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>短信验证码
						</dt>
						<dd class="regForm-item-ct">
							<input class="ipt norWidthIpt">
							<div class="tips">
								<span class="txt-tips">
									请查收手机短信,并填写短信中的验证码
								</span>
							</div>
						</dd>
					</dl>

					<dl  class="regForm-item">
						<dd class="regForm-item-ct txt-tips">
							<input  type="checkbox" checked="checked" > 同意
							<a href="http://reg.163.com/agreement.shtml" target="_blank" tabindex="-1">"服务条款"</a>
							和<a href="http://reg.163.com/agreement_game.shtml" target="_blank" tabindex="-1">"隐私权相关政策"</a>
						</dd>
					</dl>

					<dl class="regForm-item">
						<dd class="regForm-item-ct">
							<a class="btnReg" href="" style="text-decoration: none;">立即注册</a>
						</dd>
					</dl>
			



					
				</div>	 



				<!--表单内容区，第2个表单区-->
				<div class="regForm" style="display: none" >
					<dl class="regForm-item mainBody-hasFocus-focusArea">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>手机号码
						</dt>
						<dd class="regForm-item-ct">
							<input  type="text" class="ipt" style="padding-left: 20px;width:245px;color:#999;font-weight:normal" autocomplete="off" value="">
							<strong class="txt-14">@163.com</strong>

							<b class="ico ico-mob"></b>
							
							<div  class="tips">
								<span class="txt-tips">请填写手机号码</span>
							</div>
						</dd>
					</dl>

					
					</dl><dl class="regForm-item">
						<dt class="regForm-item-tit" style="top:30px;">
							<span class="txt-impt">*</span>验证码
						</dt>
						<dd class="regForm-item-ct">
							<input type="text" class="ipt">
							<img src="statics/img/call.jpg" >
							<a href="#" class="switchCode">看不清楚?换一张</a>
							<div class="tips">
								<span class="txt-tips">
									请填写图片中的字符,不区分大小写
								</span>
							</div>
							<div class="btns">
								<a>
									<a href="#" style="text-decoration: none;">
										<strong class="btn" >
											免费获取验证码
										</strong>
									</a>
								</a>
							</div>
						</dd>
					</dl>

					
						<dl class="regForm-item">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>短信验证码
						</dt>
						<dd class="regForm-item-ct">
							<input class="ipt norWidthIpt">
							<div class="tips">
								<span class="txt-tips">
									请查收手机短信,并填写短信中的验证码
								</span>
							</div>
						</dd>
					</dl>


					<dl  class="regForm-item">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-item-ct">
							<input  type="password" class="ipt norWidthIpt" style="ime-mode:disabled">
							<div  class="tips" >
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<dl class="regForm-item">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>确认密码
						</dt>
						<dd class="regForm-item-ct">
							<input type="password" class="ipt norWidthIpt" >

							<div class="tips">
								<span class="txt-tips">请再次填写密码</span>
							</div>
						</dd>
					</dl>
					

					<dl  class="regForm-item">
						<dd class="regForm-item-ct txt-tips">
							<input  type="checkbox" checked="checked" > 同意
							<a href="http://reg.163.com/agreement.shtml" target="_blank" tabindex="-1">"用户须知"</a>
							和<a href="http://reg.163.com/agreement_game.shtml" target="_blank" tabindex="-1">"隐私权相关政策"</a>
						</dd>
					</dl>

					<dl class="regForm-item">
						<dd class="regForm-item-ct">
							<a class="btnReg" href="" style="text-decoration: none;">立即注册</a>
						</dd>
					</dl>
				</div>




				<!--表单内容区，第3个表单区-->
				<div class="regForm" style="display: none" >

					<div class="m-title">注册网易VIP邮箱，安全提升30%，享1对1服务，30元/月
					</div>
					
					<dl class="regForm-item mainBody-hasFocus-focusArea">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>用户名
						</dt>
						<dd class="regForm-item-ct">
							<input  type="text" class="ipt" style="ime-mode:disabled;color:#999;font-weight:normal" autocomplete="off" value="">
							<strong class="txt-14">@VIP.163.com</strong>

							<div  class="tips">
								<span class="txt-tips">6~20个字符，数字、点、减号或下划线，需以字母开头</span>
							</div>
						</dd>
					</dl>                                        

					


					<dl  class="regForm-item">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-item-ct">
							<input  type="password" class="ipt norWidthIpt" style="ime-mode:disabled">
							<div  class="tips" >
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<dl class="regForm-item">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>滑动验证码
						</dt>
						<dd class="regForm-item-ct">
							<input type="password" class="ipt norWidthIpt" >

							<div class="tips">
								<span class="txt-tips">请滑动上方验证码</span>
							</div>
						</dd>
					</dl>
					
						<dl class="regForm-item">
						<dt class="regForm-item-tit" style="top:30px;">
							<span class="txt-impt">*</span>安全手机
						</dt>
						<dd class="regForm-item-ct">
		
							<input type="password" class="ipt norWidthIpt" >

			
							<div class="tips">
								<span class="txt-tips">
								找回密码和认证时使用，不扣费
								</span>
							</div>
							<div class="btns">
								<a>
									<a href="#" style="text-decoration: none;">
										<strong class="btn" >
											免费获取验证码
										</strong>
									</a>
								</a>
							</div>
						</dd>
					</dl>

					<dl class="regForm-item">
						<dt class="regForm-item-tit">
							<span class="txt-impt">*</span>手机验证码
						</dt>
						<dd class="regForm-item-ct">

							<input type="password" class="ipt norWidthIpt" >

							<div class="tips">
								<span class="txt-tips">请填写手机验证码，不区分大小写</span>
							</div>
						</dd>
					</dl>


					<dl  class="regForm-item">
						<dd class="regForm-item-ct txt-tips">
							<input  type="checkbox" checked="checked" > 
							<span style="font-size: 14px; color: #000;">我已阅读并接受</span>
							<a href="http://reg.163.com/agreement_game.shtml" target="_blank" tabindex="-1" style="font-size: 14px; ">"网易VIP邮箱服务条款"</a>
						</dd>
					</dl>

					<dl class="regForm-item">
						<dd class="regForm-item-ct">
							<a class="btnReg" href="" style="text-decoration: none;">立即注册</a>
						</dd>
					</dl>


					<div class="tips">
						<span class="m-warn">温馨提示：注册3天未支付，用户名将被收回，可能被他人抢注！</span>
					</div>
				</div>

			</div>

			<!-- 右边广告区 -->
			<div class="mainBody-side">
				<div class="regExt">
					<img src="statics/img/reg_master.gif">
				</div>
			</div>
		</div>
		<footer class="footer" style="height:80px">
						<a tabindex="-1" href="http://corp.163.com/index_gb.html" target="_blank">关于网易</a>
						&nbsp;&nbsp;
						<a tabindex="-1" href="http://mail.163.com/html/mail_intro" target="_blank">关于网易免费邮</a>
						&nbsp;&nbsp;
						<a tabindex="-1" href="http://mail.blog.163.com/" target="_blank">邮箱官方博客</a>
						&nbsp;&nbsp;
						<a tabindex="-1" href="http://help.163.com/" target="_blank">客户服务</a>
						&nbsp;&nbsp;
						<a tabindex="-1" href="http://corp.163.com/gb/legal/legal.html" target="_blank">隐私政策</a>
						&nbsp;&nbsp;|&nbsp;&nbsp;
						网易公司版权所有&nbsp;©&nbsp;1997-<script src="http://mimg.127.net/copyright/year.js"></script>2018
						<br>数据来源：艾媒咨询《2015-2018中国个人邮箱行业研究报告》
					</footer>
	</section>

	<script type="text/javascript">
			function  switchPanel(){
				console.log('hello javascript');
				var div=document.querySelector('.it1');
				
				var panel=document.querySelector('.select_panel');
				panel.style.display = 'none';
				div.addEventListener('click',function(e){
					var a = e.target;

					if (panel.style.display == 'none') {
						panel.style.display = 'block'
					}else{
						panel.style.display = 'none';}
					
					//console.log('我被点击了')；
				})
			}

			function selectFlag(){
				console.log('我是selectFlag函数');

				var links=document.querySelectorAll('.select_panel a');

				var phone=document.querySelector('#phone');

				for (var i = 0; i < links.length; i++) {

					links[i].addEventListener('click',function(e){

						var a=e.target;
						var pos=a.innerText.indexOf('+');
						var lth=a.innerText.length;
						var cno=a.innerText.substr(pos,lth-pos);


						document.querySelector('#phone').setAttribute('value',cno);
						/***获取a标签中的国旗样式**/
						var cls = a.className;
						/**把a标签中的国旗样式，赋值给输入框前面的div**/
						document.querySelector('.itFlag').className = 'itFlag '+cls;


	
					})
				}
			}


			function  switchTab(){
				var tabs=document.querySelectorAll('.regTabs ul li a');
				var panels=document.querySelectorAll('.regForm');
				
				for (var i = 0;i<tabs.length ;i++) {
					tabs[i].index=i;

					panels[i].index=i;

					tabs[i].addEventListener('click',function(e){
						var a=e.target;


						switch(a.index){
							case 1:
								document.querySelector('.regTabs ul').style.background='url(statics/img/tab.jpg) 0 -58px';

								document.querySelector('.regExt img').setAttribute('src','statics/img/reg_master.gif');
								break;

							case 2:
								document.querySelector('.regTabs ul').style.background='url(statics/img/tab.jpg) 0 -111px';

								document.querySelector('.regExt img').setAttribute('src','statics/img/reg_vip_163.gif');
								break;

							default:
								document.querySelector('.regTabs ul').style.background='url(statics/img/tab.jpg) 0 0';

								document.querySelector('.regExt img').setAttribute('src','statics/img/reg_master.gif');

						}

						/**document.querySelector('.regTabs ul').style.background='url(statics/img/tab.jpg) 0 -'+a.index*55.3+'px';**/

						for (j=0;j<tabs.length;j++){
							tabs[j].style.color='#000';
						}
						a.style.color='#fff';

						/**设置显示那个表单区**/
						for(t=0;t<panels.length;t++){
							panels[t].style.display='none';
						}
						panels[a.index].style.display='block';

						/**切换广告区的图片**/
						/*document.querySelector('.regExt img').setAttribute('src','statics/img/reg_vip_163.gif');*/
					})
				}
			}


			selectFlag();	
			switchPanel();
			switchTab();
			
	</script>
</body>
</htm